<template>
  <view class="workorder-todo-container">
    <!-- 顶部导航 -->
    <view class="nav-header">
      <text class="nav-back" @click="goBack">返回</text>
      <text class="nav-title">待办列表</text>
    </view>

    <!-- 工单列表 -->
    <view class="workorder-list">
      <view 
        class="workorder-item" 
        v-for="item in workorderList" 
        :key="item.id"
      >
        <view class="item-header">
          <text class="item-title">{{ item.repairType }}</text>
          <text class="item-status" :class="getStatusClass(item.status)">
            {{ item.status }}
          </text>
        </view>
        <view class="item-content">
          <view class="item-row">
            <text class="item-label">房产信息：</text>
            <text class="item-value">{{ item.jzxm }} - {{ item.htbh }}</text>
          </view>
          <view class="item-row">
            <text class="item-label">申请人：</text>
            <text class="item-value">{{ item.createByNickname }}</text>
          </view>
          <view class="item-row">
            <text class="item-label">处理人：</text>
            <text class="item-value" :class="getHandlerClass(item.operaUseNickname)">
              {{ item.operaUseNickname || '未分配' }}
              <text v-if="item.operaUseDept" class="handler-dept">({{ item.operaUseDept }})</text>
            </text>
          </view>
          <view class="item-row">
            <text class="item-label">申请时间：</text>
            <text class="item-value">{{ formatDate(item.createTime) }}</text>
          </view>
          <view class="item-row">
            <text class="item-label">报修内容：</text>
            <text class="item-value description">{{ item.repairContent }}</text>
          </view>
          <view class="item-row" v-if="item.responseContent">
            <text class="item-label">处理回复：</text>
            <text class="item-value description">{{ item.responseContent }}</text>
          </view>
        </view>
        <view class="item-footer">
          <view class="item-actions">
            <text class="action-btn view" @click.stop="viewDetail(item)">查看详情</text>
            <text class="action-btn accept" @click.stop="acceptWorkorder(item)" v-if="item.status === '已派单'">接受工单</text>
            <text class="action-btn reject" @click.stop="rejectWorkorder(item)" v-if="item.status === '已派单'">转派工单</text>
            <text class="action-btn complete" @click.stop="goToComplete(item)" v-if="item.status === '已接单'">完成工单</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="workorderList.length === 0 && !loading">
      <text class="empty-text">暂无待办工单</text>
    </view>

    <!-- 加载状态 -->
    <view class="loading-state" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 转派订单弹窗 -->
    <uni-popup ref="rejectPopup" type="bottom">
      <view class="reject-popup">
        <view class="popup-header">
          <text class="popup-title">转派工单</text>
          <text class="popup-close" @click="closeRejectPopup">×</text>
        </view>
        <view class="popup-content">
          <view class="form-item">
            <text class="form-label">选择处理人</text>
            <view class="user-selector">
              <uni-easyinput
                v-model="userSearchKeyword"
                placeholder="请输入姓名、手机号或部门搜索"
                :clearable="true"
                @focus="onSearchFocus"
                @blur="onSearchBlur"
              />
              <view class="user-dropdown" v-if="showUserDropdown && filteredUserList.length > 0">
                <view 
                  class="user-item" 
                  v-for="item in filteredUserList" 
                  :key="item.userId"
                  @click="selectUser(item)"
                >
                  <text class="user-name">{{ item.nickName || item.userName }}</text>
                  <text class="user-phone">{{ item.phonenumber }}</text>
                  <text class="user-dept">{{ (item.dept && item.dept.deptName) || '' }}</text>
                </view>
              </view>
              <view class="user-dropdown-empty" v-if="showUserDropdown && filteredUserList.length === 0 && userSearchKeyword">
                <text class="empty-text">未找到匹配的用户</text>
              </view>
              <view class="user-list-empty" v-if="userList.length === 0">
                <text class="empty-text">用户列表为空</text>
                <text class="retry-btn" @click="reloadUserList">重新加载</text>
              </view>
              <view class="selected-user" v-if="selectedUserInfo">
                <text class="selected-text">已选择：{{ selectedUserInfo.nickName || selectedUserInfo.userName }}</text>
                <text class="clear-selection" @click="clearUserSelection">×</text>
              </view>
            </view>
          </view>
          <view class="form-item">
            <text class="form-label">转派备注</text>
            <uni-easyinput
              v-model="rejectForm.remark"
              type="textarea"
              placeholder="请输入转派原因或备注信息"
              :clearable="true"
            />
          </view>
        </view>
        <view class="popup-footer">
          <button class="btn-cancel" @click="closeRejectPopup">取消</button>
          <button class="btn-confirm" @click="confirmReject">确认转派</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { getRepairList1, assignRepair, acceptRepair, completeRepair } from '@/api/door/repair'
import { getUserList1 } from '@/api/system/user'

export default {
  data() {
    return {
      stats: {
        totalCount: 0,
        pendingCount: 0,
        completedCount: 0
      },
      workorderList: [],
      loading: false,
      pageNum: 1,
      pageSize: 10,
      hasMore: true,
      userSearchKeyword: '',
      showUserDropdown: false,
      filteredUserList: [],
      selectedUserInfo: null,
      userList: [],
      currentWorkorder: null,
      rejectForm: {
        remark: ''
      }
    }
  },
  onLoad() {
    console.log('页面加载')
    this.loadData()
    this.loadUserList()
  },
  watch: {
    userSearchKeyword(newVal, oldVal) {
      console.log('搜索关键词变化:', oldVal, '->', newVal)
      this.filterUsers()
    }
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.refreshData()
  },
  // 上拉加载更多
  onReachBottom() {
    if (this.hasMore && !this.loading) {
      this.loadMore()
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    
    // 加载用户列表
    async loadUserList() {
      try {
        const params = {
          pageNum: 1,
          pageSize: 1000,
          roleId: 102 // 处理人员角色ID
        }
        
        console.log('加载用户列表参数:', params)
        const response = await getUserList1(params)
        
        if (response.code === 200) {
          this.userList = response.rows || []
          console.log('用户列表加载成功:', this.userList.length, '条')
        } else {
          console.error('加载用户列表失败:', response.msg)
          this.$modal.msgError(response.msg || '加载用户列表失败')
        }
      } catch (error) {
        console.error('加载用户列表失败:', error)
        this.$modal.msgError('加载用户列表失败，请检查网络连接')
      }
    },

    // 重新加载用户列表
    async reloadUserList() {
      this.$modal.loading('正在重新加载用户列表...')
      try {
        await this.loadUserList()
        this.$modal.closeLoading()
        this.$modal.msgSuccess('用户列表加载成功')
      } catch (error) {
        this.$modal.closeLoading()
        this.$modal.msgError('重新加载失败')
      }
    },
    
    // 加载工单数据
    async loadData() {
      if (this.loading) return
      
      this.loading = true
      try {
        const params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
        
        console.log('查询待办工单参数:', params)
        const response = await getRepairList1(params)
        
        if (response.code === 200) {
          if (this.pageNum === 1) {
            this.workorderList = response.rows || []
          } else {
            this.workorderList = [...this.workorderList, ...(response.rows || [])]
          }
          
          this.hasMore = response.rows && response.rows.length === this.pageSize
          
          // 更新统计数据
          this.updateStats()
          
          console.log('待办工单数据:', response.total, '条')
        } else {
          this.$modal.msgError(response.msg || '获取数据失败')
        }
      } catch (error) {
        console.error('加载数据失败:', error)
        this.$modal.msgError('网络异常，请稍后重试')
      } finally {
        this.loading = false
        uni.stopPullDownRefresh()
      }
    },
    
    // 更新统计数据
    updateStats() {
      this.stats.totalCount = this.workorderList.length
      this.stats.pendingCount = this.workorderList.filter(item => item.status === '已派单').length
      this.stats.completedCount = this.workorderList.filter(item => item.status === '已完成').length
    },
    
    // 刷新数据
    refreshData() {
      this.pageNum = 1
      this.loadData()
    },
    
    // 加载更多
    loadMore() {
      this.pageNum++
      this.loadData()
    },
    
    // 查看详情
    viewDetail(item) {
      console.log('查看详情:', item)
      // 将当前行数据编码后传递到详情页面
      const workorderData = encodeURIComponent(JSON.stringify(item))
      uni.navigateTo({
        url: `/pages/workorder/detail?id=${item.id}&workorderData=${workorderData}`,
        success: () => {
          console.log('跳转成功')
        },
        fail: (error) => {
          console.error('跳转失败:', error)
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          })
        }
      })
    },
    
    // 接受工单
    async acceptWorkorder(item) {
      uni.showModal({
        title: '确认操作',
        content: '确定接受此工单吗？',
        success: async (res) => {
          if (res.confirm) {
            this.$modal.loading('正在处理...')
            try {
              const params = {
                repairOrderId: item.id,
                remark: '接受工单'
              }
              
              console.log('接受工单数据:', params)
              const response = await acceptRepair(params)
              
              if (response.code === 200) {
                this.$modal.closeLoading()
                this.$modal.msgSuccess('接受成功')
                item.status = '处理中'
                this.updateStats()
                
                // 刷新数据
                this.refreshData()
              } else {
                this.$modal.closeLoading()
                this.$modal.msgError(response.msg || '接受失败')
              }
            } catch (error) {
              this.$modal.closeLoading()
              console.error('接受工单失败:', error)
              this.$modal.msgError('网络异常，请稍后重试')
            }
          }
        }
      })
    },
    
    // 完成工单
    async completeWorkorder(item) {
      uni.showModal({
        title: '确认操作',
        content: '确定完成此工单吗？',
        success: async (res) => {
          if (res.confirm) {
            this.$modal.loading('正在处理...')
            try {
              const params = {
                repairOrderId: item.id,
                remark: '完成工单'
              }
              
              console.log('完成工单数据:', params)
              const response = await completeRepair(params)
              
              if (response.code === 200) {
                this.$modal.closeLoading()
                this.$modal.msgSuccess('完成成功')
                item.status = '已完成'
                this.updateStats()
                
                // 刷新数据
                this.refreshData()
              } else {
                this.$modal.closeLoading()
                this.$modal.msgError(response.msg || '完成失败')
              }
            } catch (error) {
              this.$modal.closeLoading()
              console.error('完成工单失败:', error)
              this.$modal.msgError('网络异常，请稍后重试')
            }
          }
        }
      })
    },
    
    // 跳转到完成订单页面
    goToComplete(item) {
      console.log('跳转到完成订单页面:', item)
      // 将工单数据编码后传递到完成页面
      const workorderData = encodeURIComponent(JSON.stringify(item))
      uni.navigateTo({
        url: `/pages/workorder/complete?id=${item.id}&workorderData=${workorderData}`,
        success: () => {
          console.log('跳转成功')
        },
        fail: (error) => {
          console.error('跳转失败:', error)
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          })
        }
      })
    },
    
    // 转派工单
    rejectWorkorder(item) {
      
      // 检查工单状态
      if (item.status !== '已派单') {
        this.$modal.msgError('只能转派已派单状态的工单')
        return
      }
      
      // 检查用户列表是否已加载
      if (this.userList.length === 0) {
        this.$modal.msgError('用户列表未加载，请稍后重试')
        this.loadUserList()
        return
      }
      
      this.currentWorkorder = item
      this.selectedUserInfo = null // 清空已选择的用户
      this.userSearchKeyword = '' // 清空搜索关键词
      this.showUserDropdown = false // 隐藏下拉列表
      this.rejectForm.remark = '' // 清空备注
      this.$refs.rejectPopup.open() // 打开弹窗
    },

    // 关闭转派弹窗
    closeRejectPopup() {
      this.$refs.rejectPopup.close()
      this.resetRejectForm()
    },

    // 重置转派表单
    resetRejectForm() {
      this.currentWorkorder = null
      this.selectedUserInfo = null
      this.userSearchKeyword = ''
      this.showUserDropdown = false
      this.filteredUserList = []
      this.rejectForm.remark = ''
    },



    // 过滤用户列表
    filterUsers() {
      try {
        console.log('开始过滤用户列表, 关键词:', this.userSearchKeyword, '用户列表长度:', this.userList.length)
        
        if (this.userSearchKeyword && this.userSearchKeyword.trim()) {
          const keyword = this.userSearchKeyword.toLowerCase().trim()
          this.filteredUserList = this.userList.filter(user => {
            if (!user) return false
            
            const nickName = (user.nickName || '').toLowerCase()
            const userName = (user.userName || '').toLowerCase()
            const phonenumber = (user.phonenumber || '').toLowerCase()
            const deptName = (user.dept && user.dept.deptName) ? user.dept.deptName.toLowerCase() : ''
            
            return nickName.includes(keyword) || 
                   userName.includes(keyword) || 
                   phonenumber.includes(keyword) ||
                   deptName.includes(keyword)
          }).slice(0, 10) // 限制显示前10条
          this.showUserDropdown = this.filteredUserList.length > 0
          
          console.log('过滤结果:', this.filteredUserList.length, '条')
        } else {
          this.showUserDropdown = false
          this.filteredUserList = []
          console.log('清空过滤结果')
        }
      } catch (error) {
        console.error('过滤用户列表失败:', error)
        this.showUserDropdown = false
        this.filteredUserList = []
      }
    },

    // 搜索框获得焦点
    onSearchFocus() {
      console.log('搜索框获得焦点')
      if (this.userSearchKeyword && this.userSearchKeyword.trim()) {
        this.filterUsers()
      }
    },

    // 搜索框失去焦点
    onSearchBlur() {
      console.log('搜索框失去焦点')
      // 延迟隐藏下拉列表，避免点击用户项时立即隐藏
      setTimeout(() => {
        this.showUserDropdown = false
      }, 200)
    },

    // 选择用户
    selectUser(user) {
      try {
        // 验证用户数据
        if (!user || !user.userId) {
          console.error('用户数据无效:', user)
          this.$modal.msgError('用户数据无效')
          return
        }
        
        // 检查是否选择了自己
        const currentUser = this.$store.getters.userInfo
        if (currentUser && currentUser.userId === user.userId) {
          this.$modal.msgError('不能转派给自己')
          return
        }
        
        this.selectedUserInfo = user
        this.userSearchKeyword = user.nickName || user.userName
        this.showUserDropdown = false
        this.filteredUserList = []
        
        console.log('已选择用户:', user)
      } catch (error) {
        console.error('选择用户失败:', error)
        this.$modal.msgError('选择用户失败')
      }
    },

    // 清除选择的用户
    clearUserSelection() {
      this.selectedUserInfo = null
      this.userSearchKeyword = ''
      this.showUserDropdown = false
      this.filteredUserList = []
    },

    // 确认转派
    async confirmReject() {
      // 验证工单信息
      if (!this.currentWorkorder || !this.currentWorkorder.id) {
        this.$modal.msgError('工单信息无效')
        return
      }
      
      // 验证选择的用户
      if (!this.selectedUserInfo || !this.selectedUserInfo.userId) {
        this.$modal.msgError('请选择转派处理人')
        return
      }
      
      // 验证备注信息
      if (!this.rejectForm.remark || !this.rejectForm.remark.trim()) {
        this.$modal.msgError('请输入转派备注')
        return
      }
      
      // 检查工单状态
      if (this.currentWorkorder.status !== '已派单') {
        this.$modal.msgError('只能转派已派单状态的工单')
        return
      }
      
      // 检查是否转派给自己
      const currentUser = this.$store.getters.userInfo
      if (currentUser && currentUser.userId === this.selectedUserInfo.userId) {
        this.$modal.msgError('不能转派给自己')
        return
      }

      this.$modal.loading('正在处理...')
      try {
        const params = {
          repairOrderId: this.currentWorkorder.id,
          operaUserId: this.selectedUserInfo.userId,
          log: this.rejectForm.remark.trim()
        }
        
        console.log('转派工单数据:', params)
        
        const response = await assignRepair(params)
        if (response.code === 200) {
          this.$modal.closeLoading()
          this.$modal.msgSuccess('转派成功')
          
          // 更新工单状态
          this.currentWorkorder.status = '已转派'
          this.currentWorkorder.operaUseNickname = this.selectedUserInfo.nickName || this.selectedUserInfo.userName
          this.currentWorkorder.operaUseId = this.selectedUserInfo.userId
          
          this.updateStats()
          this.closeRejectPopup()
          
          // 刷新数据
          this.refreshData()
        } else {
          this.$modal.closeLoading()
          this.$modal.msgError(response.msg || '转派失败')
        }
      } catch (error) {
        this.$modal.closeLoading()
        console.error('转派失败:', error)
        this.$modal.msgError('网络异常，请稍后重试')
      }
    },
    
    // 获取状态样式
    getStatusClass(status) {
      const classMap = {
        '已派单': 'status-pending',
        '已接单': 'status-accepted',
        '处理中': 'status-accepted',
        '已完成': 'status-completed',
        '已拒绝': 'status-rejected',
        '已转派': 'status-rejected'
      }
      return classMap[status] || 'status-pending'
    },

    // 获取处理人样式
    getHandlerClass(handlerName) {
      if (!handlerName) {
        return 'handler-unassigned'
      }
      return 'handler-assigned'
    },
    
    // 格式化日期
    formatDate(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    }
  }
}
</script>

<style lang="scss" scoped>
.workorder-todo-container {
  background-color: #f5f6f7;
  min-height: 100vh;
}

.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  
  .nav-back {
    color: #007AFF;
    font-size: 28rpx;
  }
  
  .nav-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
}

.stats-section {
  padding: 20rpx;
}

.stats-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  display: flex;
  justify-content: space-around;
  
  .stats-item {
    text-align: center;
    
    .stats-num {
      display: block;
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .stats-label {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.workorder-list {
  padding: 20rpx;
}

.workorder-item {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 30rpx;
  
  .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .item-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      flex: 1;
    }
    
    .item-status {
      font-size: 24rpx;
      padding: 8rpx 16rpx;
      border-radius: 20rpx;
      
      &.status-pending {
        background-color: #fff7e6;
        color: #fa8c16;
      }
      
      &.status-accepted {
        background-color: #e6f7ff;
        color: #1890ff;
      }
      
      &.status-completed {
        background-color: #e8f5e8;
        color: #52c41a;
      }
      
      &.status-rejected {
        background-color: #fff2f0;
        color: #ff4d4f;
      }
    }
  }
  
  .item-content {
    .item-row {
      display: flex;
      margin-bottom: 15rpx;
      
      .item-label {
        font-size: 26rpx;
        color: #666;
        width: 140rpx;
      }
      
              .item-value {
          font-size: 26rpx;
          color: #333;
          flex: 1;
          
          &.description {
            color: #666;
            line-height: 1.5;
          }
          
          &.handler-unassigned {
            color: #999;
            font-style: italic;
          }
          
          &.handler-assigned {
            color: #1890ff;
            font-weight: 500;
          }
          
          .handler-dept {
            font-size: 22rpx;
            color: #666;
            margin-left: 10rpx;
          }
        }
    }
  }
  
  .item-footer {
    margin-top: 20rpx;
    padding-top: 20rpx;
    border-top: 1px solid #f0f0f0;
    
    .item-actions {
      display: flex;
      gap: 20rpx;
      
      .action-btn {
        font-size: 24rpx;
        padding: 8rpx 20rpx;
        border-radius: 20rpx;
        
        &.view {
          background-color: #f6ffed;
          color: #52c41a;
        }
        
        &.accept {
          background-color: #e6f7ff;
          color: #1890ff;
        }
        
        &.reject {
          background-color: #fff2f0;
          color: #ff4d4f;
        }
        
        &.complete {
          background-color: #f6ffed;
          color: #52c41a;
        }
      }
      
      .user-dropdown-empty {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 10rpx;
        padding: 20rpx;
        text-align: center;
        z-index: 1000;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
        
        .empty-text {
          font-size: 26rpx;
          color: #999;
        }
      }
      
      .user-list-empty {
        margin-top: 20rpx;
        text-align: center;
        padding: 30rpx;
        background-color: #f8f9fa;
        border-radius: 10rpx;
        
        .empty-text {
          display: block;
          font-size: 26rpx;
          color: #999;
          margin-bottom: 20rpx;
        }
        
        .retry-btn {
          display: inline-block;
          font-size: 24rpx;
          color: #007AFF;
          padding: 10rpx 20rpx;
          border: 1px solid #007AFF;
          border-radius: 20rpx;
          
          &:hover {
            background-color: #007AFF;
            color: #fff;
          }
        }
      }
    }
  }
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx 0;
  
  .loading-text {
    font-size: 28rpx;
    color: #666;
  }
}

/* 转派弹窗样式 */
.reject-popup {
  padding: 30rpx;
  background-color: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  position: relative;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;

  .popup-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }

  .popup-close {
    font-size: 40rpx;
    color: #999;
    font-weight: bold;
  }
}

.popup-content {
  .form-item {
    margin-bottom: 30rpx;

    .form-label {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 10rpx;
      display: block;
    }

    .user-selector {
      position: relative;
      
      .user-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 10rpx;
        max-height: 400rpx;
        overflow-y: auto;
        z-index: 1000;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
        
        .user-item {
          padding: 20rpx;
          border-bottom: 1px solid #f0f0f0;
          
          &:last-child {
            border-bottom: none;
          }
          
          &:hover {
            background-color: #f5f5f5;
          }
          
          .user-name {
            display: block;
            font-size: 28rpx;
            color: #333;
            margin-bottom: 8rpx;
          }
          
          .user-phone {
            display: block;
            font-size: 24rpx;
            color: #666;
            margin-bottom: 4rpx;
          }
          
          .user-dept {
            display: block;
            font-size: 22rpx;
            color: #999;
          }
        }
      }
      
      .selected-user {
        margin-top: 10rpx;
        padding: 10rpx;
        background-color: #f0f8ff;
        border-radius: 8rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .selected-text {
          font-size: 26rpx;
          color: #1890ff;
          flex: 1;
        }
        
        .clear-selection {
          font-size: 28rpx;
          color: #999;
          padding: 5rpx 10rpx;
          border-radius: 50%;
          
          &:hover {
            background-color: #f0f0f0;
          }
        }
      }
    }
  }
}

.popup-footer {
  display: flex;
  justify-content: space-around;
  padding-top: 30rpx;
  border-top: 1px solid #eee;

  .btn-cancel, .btn-confirm {
    flex: 1;
    text-align: center;
    padding: 15rpx 0;
    border-radius: 30rpx;
    font-size: 32rpx;
    font-weight: bold;
    margin: 0 10rpx;
  }

  .btn-cancel {
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #eee;
  }

  .btn-confirm {
    background-color: #007AFF;
    color: #fff;
  }
}
</style> 